<template>
  <div class="allRadio">
    <div class="text">
      <!-- <input disabled v-model="texta" class="texta"></input>
      <input disabled v-model="textb" class="textb"></input> -->
    </div>
    <v-radio-group v-model="radioGroup" row>
      <v-radio
        v-for="n in labels"
        :key="n.id"
        :label="`${n.label_name.slice(0, 4)}`"
        :value="n.id"
        class="radioLabels"
      ></v-radio>
    </v-radio-group>
  </div>
</template>

<script>
import { idealColor } from '~/plugins/utils'

export default {
  data() {
    return {
      texta: '',
      textb: ''
    }
  },
  props: {
    items: {
      type: Array,
      default: () => []
    },
    textDoc: {
      type: Object,
      default: () => {}
    },
    labels: {
      type: Array,
      default: () => [],
      required: true
    },
    annotations: {
      type: Array,
      default: () => [],
      required: true
    },
    addLabel: {
      type: Function,
      default: () => [],
      required: true
    },
    deleteLabel: {
      type: Function,
      default: () => [],
      required: true
    }
  },
  computed: {
    radioGroup: {
      get() {
        console.log(this.annotations)
        const labelIds = this.annotations.map(item => item.label)
        console.log(labelIds)
        const item = this.labels.filter(item => labelIds.includes(item.id))
        console.log(item)
        if (item.length > 0) {
          localStorage.setItem('simpleKey', 'success')
        } else {
          localStorage.removeItem('simpleKey', 'success')
        }
        if (item.length === 0) {
          return null
        } else {
          return item[0].id
        }
      },
      set(newValue) {
        console.log(newValue)
        console.log(this.annotations)
        const labelIds = this.annotations.map(item => item.label)
        console.log(labelIds)
        const item = this.labels.filter(item => labelIds.includes(item.id))
        console.log(item)
        const send = this.labels.filter(item => item.id === newValue)
        this.texta = `${send[0].text}`
        console.log(send[0])
        this.add(send[0])
        if (item.length > 0) {
          this.remove(item[0].id)
        }
      }
    },
    annotatedLabels: {
      get() {
        console.log(this.labels)
        console.log(this.annotations)
        const labelIds = this.annotations.map(item => item.label)
        const item = this.labels.filter(item => labelIds.includes(item.id))
        // const id = item[0].id
        // console.log(labelIds)
        // console.log(item)
        // this.text = item.text
        if (item.length > 0) {
          localStorage.setItem('simpleKey', 'success')
        } else {
          localStorage.removeItem('simpleKey', 'success')
        }
        return item
      },
      set(newValue) {
        console.log(newValue)
        this.textb = newValue.text
        const that = this
        if (newValue.length < 2) {
          if (newValue.length > this.annotations.length) {
            const label = newValue[newValue.length - 1]
            if (typeof label === 'object') {
              that.add(label)
            } else {
              newValue.pop()
            }
          } else {
            const label = this.annotatedLabels.find(
              x => !newValue.some(y => y.id === x.id)
            )
            if (typeof label === 'object') {
              this.remove(label.id)
            }
          }
        } else {
          // this.remove(newValue[0].id)
          // // newValue.shift()
          // const addValue = newValue[newValue.length - 1]
          // console.log(addValue)
          // // console.log(newValue)
          // // console.log(newValue)
          // if (typeof addValue === 'object') {
          //   this.add(addValue)
          // }
          // console.log(newValue)
        }
      }
    }
  },
  watch: {
    textDoc: {
      handler(nev, old) {
        if (nev) {
          console.log(nev.text)
          this.textb = nev.text
        }
      }
    },
    radioGroup: {
      handler(newValue, oldValue) {
        if (newValue) {
          console.log(newValue)
          const send = this.labels.filter(item => item.id === newValue)
          console.log(send)
          console.log(this.textDoc)
          // console.log(newValue[0].text)
          this.texta = `${send[0].text}`
          // this.textb = `${this.textDoc.text}`
        }
      }
    }
  },
  methods: {
    textColor(backgroundColor) {
      return idealColor(backgroundColor)
    },
    add(label) {
      this.addLabel(label.id)
    },
    remove(labelId) {
      const annotation = this.annotations.find(item => item.label === labelId)
      this.deleteLabel(annotation.id)
    },
    changeLabels(id) {
      console.log(id)
    }
  },
  created() {
    console.log(this.annotations)
    const labelIds = this.annotations.map(item => item.label)
    console.log(labelIds)
    const item = this.labels.filter(item => labelIds.includes(item.id))
    console.log(item)
    console.log(this.textDoc)
    if (item.length > 0) {
      this.texta = item[0].text
      this.textb = this.textDoc.text
    } else {
      this.texta = ''
    }
    if (this.textDoc.text !== null) {
      this.textb = this.textDoc.text
    } else {
      this.textb = ''
    }
  }
}
</script>
<style scoped>
.allRadio {
  /* margin-top: 2vw; */
  transform: translateY(3.5vw);
  /* transform: translateX(-2vw) */
}
.radioLabels {
  margin: 10px 15px;
  width: 5vw;
}
.select {
  width: 50vw;
}
.text {
  width: 100%;
  transform: translateY(200px);
  color: #fab;
}
.texta {
  width: 20%;
  color: red;
}
.textb {
  width: 500px;
}
</style>
